<template>
  <div>
    <div class="item_box_jbxx grhyjbxx">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1">
          <template slot="title">
            <div style="text-align: center; width: 100%">人员信息</div>
          </template>
          <list
            class="childComp"
            ref="childComp"
            :column="6"
            :list.sync="FormData.list"
            :bt="bt"
          >
          </list>
          <div class="ryxx_zs_box" v-for="(item, index) in zhlist" :key="index">
            <div class="ryxx_zs_item">
              <div class="ryxx_zs_item_title">其他类型证书</div>
              <el-input
                v-model="item.name"
                placeholder="请输入其他类型证书"
                :disabled="showbutton"
              ></el-input>
            </div>
            <div class="ryxx_zs_item">
              <div class="ryxx_zs_item_title">其他证书号</div>
              <el-input
                v-model="item.code"
                placeholder="请输入其他证书号"
                :disabled="showbutton"

              ></el-input>
            </div>
            <div class="xyb" v-if="!showbutton" @click="del(item.ids)" >删除</div>
            <div class="xyb"  v-if="showbutton" style="opacity: .6;">删除</div>
          </div>

          <div
            class="addbook"
            v-if="
              infostate == 0 ||
              infostate == 2 ||
              infostate == 5 ||
              infostate == 3
            "
            @click="handleClick()"
          >
            <span>添加其他类型证书</span>
          </div>
          <div class="addbook" v-else>
            <span>添加其他类型证书</span>
          </div>
          <list :column="3" :list.sync="FormData.dwlist" :bt="bt"> </list>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template slot="title">
            <div class="colltitle"><span>寸照</span><span>签名样</span></div>
          </template>
          <uploaditem
            class="collimg_box"
            :list="FormData.uploadlist"
          ></uploaditem>
        </el-collapse-item>
        <el-collapse-item title="发票信息" name="3">
          <template slot="title">
            <div class="colltitle">
              <span>土地估价专业人员资格证</span
              ><span>土地 (不动产)登记代理人证书</span>
            </div>
          </template>
          <uploaditem
            class="collimg_box"
            :list="FormData.uploadlist_2"
          ></uploaditem>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="button_box_jb">
      <div
        class="zc"
        @click="Submit()"
        v-if="
          !editid ||
          infostate == 0 ||
          infostate == 2 ||
          infostate == 5 ||
          infostate == 3
        "
      >
        保存
      </div>
      <div class="xyb" @click="goback()">返回</div>
    </div>
  </div>
</template>
  
  <script>
import list from "../../components/list.vue";
import upload from "../../components/upload.vue";
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      activeNames: ["1", "2", "3"], //展开的页面
      title: "标题",
      bt: "",
      vmodel: [
        "realname", //姓名
        "gender", //性别 0女 1男
        "political_outlook", //政治面貌
        "nation", //民族
        "birthday", //出生日期
        "code", //身份证号
        "speciality", //专业
        "title", //职称
        "education", //学历
        // "mechanism_name", //机构名称(所在单位)
        "duties", //职务
        "address", //通讯地址
        "postal_code", //邮政编码
        "mobile", //电话
        "email", //电子邮箱
        "land_valuation_code", //土地估价专业人员资格证号
        "registration_code", //不动产登记代理人（含土地登记代理人）资格证号
        "real_estate_code", //房地产估价专业人员资格证号
        "property_code", //资产评估师资格证号
        "mining_industry_code", //矿业权评估师资格证号
        "insure_code", //保险公估人员资格证号
        "broker_code", //房地产经纪人资格账号
        // ========（此处缺少证书）
        "career_resume", //从业简历
        "research_findings", //获得奖励或研究成果
        "avatar", //寸照
        "signature_images", //签名照
        "evaluate_images", //土地估价专业人员资格证
        "agent_images", //土地（不动产）登记代理人证书
      ],
      zhlist: [
        {
          name: "",
          code: "",
        },
      ],
      num:0,
      input: "",
      infostate: "",
      editid: this.$route.query.id,
      showbutton:false
    };
  },
  computed: {
    ...mapState({
      FormData: (state) => state.jgryFormData,
    }),
  },
  mounted() {
    this.update();
    // console.log(this.editid);
  },
  components: {
    list: list,
    uploaditem: upload,
  },
  methods: {
    ...mapMutations(["setjgryFormData"]),
    ...mapMutations(["sethymenulist"]),
    /**
     * 获取信息状态
     */
    getinfostate(a) {
      let that = this;
      let data = {};
      that.$http.post("mechanism/check_publicity", data).then((res) => {
        if (res.code == 1) {
          that.infostate = res.data.status;

          if (
            this.infostate == 0 ||
            this.infostate == 2 ||
            this.infostate == 5 ||
            this.infostate == 3
          ) {
          } else {
            this.showbutton = true
            this.sethymenulist(false);
          }
          this.getdata(a);
        }
      });
    },
    //判断是编辑还是添加
    update() {
      if (this.$route.query.id) {
        this.getinfostate(this.$route.query.id);
      } else {
        for (let key in this.FormData) {
          // console.log(this.FormData[key])
          this.FormData[key].forEach((item, index) => {
            if (item.type == "upload") {
              item.value.dialogImageUrl = "";
              item.imglist = [];
            } else {
              item.value = "";
            }
          });
          // this.FormData[key].value = ""
        }
      }
    },
    //删除其他证书账号
    del(ids) {
      for(let i= 0;i<this.zhlist.length;i++){
        if(ids == this.zhlist[i].ids){
          this.zhlist.splice(i, 1);
        }
      }
    },
    //添加其他证书账号
    handleClick() {
      this.num++
      let obj = {
        ids:this.num,
        name: "",
        code: "",
      };
      this.zhlist.push(obj);
      // if(this.zhlist.length <= 4){
      //   this.zhlist.push(obj);
      // }else{

      // }

      // console.log("元素被点击了", this.zhlist);
    },
    /**
     * 保存信息
     */
    Submit() {
      // console.log(this.zhlist)
      let that = this;
      let other = [];
      that.zhlist.forEach((item, index) => {
        let obj = {
          name: item.name,
          code: item.code,
        };
        other.push(obj);
      });
      // console.log(JSON.stringify(that.FormData),'=-=-=-')
      let data = that.$self.Submit(that.FormData, that.vmodel);
      let url = "";
      if (that.$route.query.id) {
        url = "mechanism/mechanism_edit_user";
        data["id"] = that.$route.query.id;
      } else {
        url = "mechanism/mechanism_add_user";
      }
      // for (let key in data) {
      //   if (data[key] == "") {
      //     that.bt = "bt";
      //     return;
      //   }
      // }
      data["other"] = other;
      // console.log(data)
      that.$http.post(url, data).then((res) => {
        that.$self.ts(res).then((e) => {
          that.$router.push({
            path: "hyryxx",
            query: { infostate: this.infostate },
          });
        });
      });
    },
    //返回上一页
    goback() {
      this.$router.push({
        path: "hyryxx",
        query: { infostate: this.infostate },
      });
    },
    //获取编辑信息
    getdata(id) {
      let that = this;
      // console.log(that.FormData);
      let data = {
        id: id,
      };
      that.$http
        .post("mechanism/mechanism_edit_user_list", data)
        .then((res) => {
          if (res.code == 1) {
            let FormData = JSON.parse(JSON.stringify(that.FormData));
            let resdata = JSON.parse(JSON.stringify(res.data));
            let formdata = this.$self.getdata(FormData, resdata, that.vmodel);
            // console.log(formdata)

            // console.log(that.infostate);

            for (let prop in formdata) {
              formdata[prop].forEach((item, index) => {
                if (
                  this.infostate == 0 ||
                  this.infostate == 2 ||
                  this.infostate == 5 ||
                  this.infostate == 3
                ) {
                  item.disabled = false;
                } else {
                  item.disabled = true;
                }
              });
            }

            that.setjgryFormData(formdata);
            that.zhlist = res.data.other;
          }
        });
    },
    //  ==
  },
};
</script>
  <style>
  .el-date-editor.el-input, .el-date-editor.el-input__inner{
    width: auto !important;
  }
  .el-input.is-disabled .el-input__inner{
    background-color: #fff;
  }
.item_box_jbxx .el-textarea.is-disabled .el-textarea__inner {
  background: #fff;
}
.item_box_jbxx .el-collapse-item__header {
  height: 0.55rem;
  background: #1954a4;
  font-size: 0.2rem;
  font-weight: bold;
  color: #ffffff;
  padding-left: 0.3875rem;
  box-sizing: border-box;
}
.item_box_jbxx .el-collapse-item:last-child .el-collapse-item__content {
  padding-bottom: 0px;
}
.item_box_jbxx {
  margin-left: 0.625rem;
}
.grhyjbxx .zxpj_br_list .highlight,
.labelclass,
.contentclass {
  background: #f2f2f2 !important;
}
.grhyjbxx .zxpj_br_list .labelclass {
  padding-left: 0.1375rem !important;
}
/* .jnhfxq_2_box {
    width: 14rem;
    margin: 0.15rem auto 0;
    font-size: 0.225rem;
    font-weight: 400;
    color: #333333;
  } */
.grhyjbxx .el-table__header thead th {
  background-color: #ebf2fc !important;
  height: 0.625rem;
  font-size: 16px;
  font-weight: 400;
  color: #1954a4;
  line-height: 0.375rem;
  text-align: center;
}
.grhyjbxx .el-table__body-wrapper tbody td {
  text-align: center;
}
.childComp .my-label_jb {
  width: 1.35rem;
}
.childComp .el-input {
  height: 100%;
}
.childComp .el-input__inner {
  height: 56px;
}
.childComp .el-descriptions :not(.is-bordered) .el-descriptions-item__cell {
  padding-bottom: 0;
}
.childComp .el-descriptions .is-bordered .el-descriptions-item__cell {
  padding: 0px 10px;
}
.ryxx_zs_box .el-input__inner {
  border: none;
  border-radius: none;
}
</style>
  <style scoped>
::v-deep .el-textarea {
  font-size: 0.2rem;
}
.ryxx_zs_box {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  flex-wrap: nowrap;
  border-left: 1px solid #ebeef5;
  min-height: 56px;
  /* background: red; */
}
.ryxx_zs_item {
  width: 44.5%;
  min-height: 56px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  align-items: center;
  border-right: 1px solid #ebeef5;
}
/* .ryxx_zs_item:nth-last-child(-n + 2) {
  border-bottom: none;
} */
.ryxx_zs_item_title {
  font-size: 0.2rem;
  font-family: Microsoft YaHei;
  color: #333;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 1.65rem;
  min-height: 56px;
  border-right: 1px solid #ebeef5;
}
.button_box_jb {
  display: flex;
  width: 2.875rem;
  justify-content: space-between;
  margin-top: 0.2625rem;
  margin-left: 0.8875rem;
  padding-bottom: 0.5rem;
}
.button_box_jb .zc,
.xyb,
.hs {
  width: 1.25rem;
  height: 0.5rem;
  background: #1954a4;
  border-radius: 0.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.2rem;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
}
.hs {
  background: #7c7c7c;
}
.hs:hover {
  background: #9c9a9a;
}
.button_box_jb .zc:hover {
  background: #1f5fb8;
}
.button_box_jb .xyb {
  background: #fca204;
}
.button_box_jb .xyb:hover {
  background: #e9a125;
}
.ryxx_zs_box .xyb {
  height: 50px;
  background: red;
  margin-left: 18px;
}
.ryxx_zs_box .xyb:hover {
  background: rgb(252, 28, 28);
}
.xtitle {
  height: 0.6375rem;
  background: #fafafa;
  border-left: 1px solid #f2f2f2;
  border-right: 1px solid #f2f2f2;
  display: flex;
  align-items: center;
  padding-left: 0.1375rem;
  font-size: 0.2rem;
  font-weight: 400;
  color: #1954a4;
}
.colltitle {
  display: flex;
  width: 100%;
}
.colltitle span {
  width: 50%;
  text-align: center;
}
.collimg_box {
  margin-top: 0.3375rem;
}
.grhyjbxx .addbook {
  height: 0.6375rem;
  background: #fafafa;
  border: 1px solid #f2f2f2;
  font-size: 0.2rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #1954a4;
  padding-left: 0.3rem;
  display: flex;
  align-items: center;
}

.grhyjbxx .addbook span:hover {
  cursor: pointer;
  color: #3e74c0 !important;
}
</style>